<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link href="../css/SYSFrame.css" rel="stylesheet" type="text/css" />
		<link href="../font/iconfont.css" rel="stylesheet" type="text/css" />
		<link href="../css/module.css" rel="stylesheet" type="text/css" />
		<link href="../css/pages.css" rel="stylesheet" type="text/css" />
		<link href="../js/built/built-editor.css" type="text/css" rel="stylesheet">
		<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
		<script src="../js/HUpages.js" type="text/javascript"></script>
		<script src="../js/common.js" type="text/javascript"></script>
		<script src="../js/template.js" type="text/javascript"></script>
		<!--[if lt IE 9]>
          <script src="../js/html5shiv.js" type="text/javascript"></script>
          <script src="../js/css3-mediaqueries.js"  type="text/javascript"></script>
        <![endif]-->
		<script src="../js/built/built-editor.min.js"></script>
		<script>
			require(["orion/editor/edit"], function(edit) {
				edit({
					className: "editor"
				});
			});
		</script>
	</head>

	<body id="pagestyle" class="backgroundf0">
		<div class="box-module margin15">
			<div class="box-title">文本框字数限制<b class="colorgreen">(原生js)</b></div>
			<div class="box-content ">
				<div class="col-lg-6 col-sm-6 height100b">
					<div class="title-name text-left">示例代码</div>
					<ul class="info_list clearfix padding15" id="pluginContent">
						<li class=" clearfix content_look mb15">
							<label class="label_name">说明：</label>
							<span class="info_data">
								<textarea data-name="说明" name="Required" class="form-textarea col-sm-6 textarea height100" id="form_textarea" placeholder=""></textarea>
							</span>
						</li>
						<li class=" clearfix content_look mb15">
							<label class="label_name"><em style="color:Red;">*</em>简介：</label>
							<span class="info_data">
							  <input data-name="简介" name="Required" type="text" id="addjianjie"  class="text_input col-sm-6" data-verify="verify"/>
							</span>
					</li>
					<li class=" clearfix content_look mb15">
						<label class="label_name"><em style="color:Red;">*</em>简介：</label>
						<span class="info_data">
							<input data-name="简介" name="Required" type="text" value="今天我很开心，谢谢大家的支持！" id="addjianjie1"  class="text_input col-sm-6" data-verify="verify"/>
						</span>
					</li>
					
				    </ul>
					
					<textarea class="textareahtml" id="textareaContent">
						
						
					</textarea>
				</div>
					<script>
						new Wordcount("form_textarea",200);
					    new Wordcount("addjianjie",50);
					    new Wordcount("addjianjie1",30);
					    var html=document.getElementById("textareaContent");
					    var content=document.getElementById("pluginContent").innerHTML;
					    html.innerHTML=content;
					    
					</script>
				<div class="col-lg-6 col-sm-6 height100b">
					<pre class="editor" data-editor-lang="js" data-editor-show-annotation-ruler="false" data-editor-show-overview-ruler="false" data-editor-show-folding-ruler="false">
/*
***********设置文本框字数*****************
 */
function Wordcount(name, number) {
	this.Wcount = this.$(name);
	this.Length(arguments);
}
// 简写document.getElementById方法. 
Wordcount.prototype.$ = function(element) {
	return document.getElementById(element);
}
Wordcount.prototype.Length = function(number) {
	var h = document.createElement("span");
	this.Wcount.parentNode.appendChild(h).className ="word_count";
	this.Wcount.onkeyup = this.GetFunction(this, "keyup", number[1]);
	count(number[1], this.Wcount);
}
function count(number, name) {
	var w = name.parentNode.querySelector(".word_count");
	w.innerHTML = "剩余字数 :< em class='colorred number'>" + number + "</em>字符";
	var d = name.parentNode.querySelector(".number");
	if(name.value.length > number) {
		var b = document.body.querySelector(".box_Bullet");
		if(!b) {
			var box = document.createElement("div");
			document.body.appendChild(box).className = "box_Bullet";
			document.body.appendChild(box).innerHTML = "您输入的字数超过限制!";
			box.style.cssText="margin-left:"+(-box.offsetWidth/2)+"px"+";"+"margin-top:"+(-box.offsetHeight/2)+"px";
			var int = setInterval(function() {clock()}, 1000);
			var num =2;//提示显示的时间
			function clock() {
				num > 0 ? num-- : clearInterval(int);
				if(num == 0) {
					clearInterval(int);
					document.body.removeChild(box);
					return
				}
			}
		}
		// 超过限制的字数了就将 文本框中的内容按规定的字数 截取
		name.value = name.value.substring(0, number);
		d.innerHTML = 0;
		return false;
	} else {
		var curr = number - name.value.length; //减去 当前输入的	
		d.innerHTML = curr.toString();
		return true;
	}

}
//onkeyup方法
Wordcount.prototype.keyup = function(col) {
	count(col, this.Wcount);
};
Wordcount.prototype.GetFunction = function(variable, method, number) {
	return function() {
		variable[method](number);
	}
}
 /*
  **********调用方法*********
 */      
  new Wordcount("id名称",设置要限制的字数);
  
示例：new Wordcount("form_textarea",200);
/*
 *****************css********************
*/
 .box_Bullet{
	position: absolute;
	padding: 10px;
	color: #FFFFFF;
	font-size: 14px;
	background-color: rgba(0,0,0,0.7);
	top:50%;
	z-index: 111111;
	left: 50%;
	border-radius: 3px;
} 
  注释：自动识别文本框是否存在文字，并显示剩余字数， 超过限制的字数了就将 文本框中的内容按规定的字数 截取        		
                	</pre>
				</div>
			</div>
		</div>
	</body>

</html>
<script>
	$(function() {
		$("#pagestyle").Hupage({
			scrollbar: function(e) {
				e.niceScroll({
					cursorcolor: "#dddddd",
					cursoropacitymax: 1,
					touchbehavior: false,
					cursorwidth: "3px",
					cursorborder: "0",
					cursorborderradius: "3px",
				});
			},
			expand: function(thisBox, settings) {
				settings.scrollbar(
					$(".box-content").css({
						height: $(window).height() - $('.box-title').outerHeight() - (settings.padding * 2)
					})); //设置当前页滚动样式
			}
		})
	});
</script>